import React from 'react';
import u from '../../../common.js'
import { message } from 'antd';
import '../../../static/routineMonitoring/outside.less'






class Outside extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            names: [],
            lifocus: 0,
            source: '',
            base: [],
            name: '',
            total: 0,
            size: 10,
            page: 1,
        }
    }
    add() {
        this.state.size == 10 ?
            this.setState((prevState, props) => ({
                page: this.state.page + 1
            }), () => {
                this.publicnumder(true)
            }) : message.success( '没有更多数据了', [1], )
    }
    componentWillMount() {
        this.getNameList()

    }
    open(index) {
        let arr = this.state.base.slice(0)
        arr[index].flag = !arr[index].flag
        this.setState((prevState, props) => ({
            base: arr
        }))
    }
    publicnumder(flag) {
        let data = {
            "page": this.state.page,
            "size": this.state.size,
            sort: '11',
            author_id: this.state.source,

        };
        u.instragramPage(data, (data) => {

            let list = data.data
            list.forEach((item) => {
                item.flag = false
            })
            let arr = flag ? this.state.base.slice(0).concat(list) : list
            this.setState((prevState, props) => ({
                base: arr,
                size: list.length,
                total: data.total
            }))
        })
    }
    getNameList() { //获取导航列表
        u.instragram({ website_type: this.props.website_type }, data => {
            if (data.data.length == 0) return;
            this.setState((prevState, props) => ({
                names: data.data,
                source: data.data[0].user_id,
                name: data.data[0].user,
            }), () => {
                this.publicnumder(false)
            })
        })
    }
    render() {
        return (
            <div className='outside'>
                <div className='outsideleft'>
                    <ul>
                        {this.state.names.length && this.state.names.map((item, index) => {
                            return (<li className={this.state.lifocus == index ? 'lictive' : ''} key={index} onClick={() => {
                                this.setState((props, prevState) => ({
                                    lifocus: index,
                                    name: item.user,
                                    source: item.user_id,
                                    size:10,
                                    page:1
                                }), () => {
                                    this.publicnumder(false)
                                })
                            }}><div className='outsideleftson'><img src={require('../../../static/image/outside.png')} alt="" /></div><span>{item.user}</span></li>)
                        })}

                    </ul>
                </div>
                <div className='outsideright'>
                    <h3>{this.state.name}<span><span>{this.state.base.length}</span> / {this.state.total}</span></h3>
                    <div className='outsiderightbotfather'>
                        <div className='outsiderightbot'>
                            <div className='outsiderightbotfa'>
                                {
                                    this.state.base.length && this.state.base.map((item, index) => {
                                        return (<div className='outsiderightbotlist' >
                                            <h3><img src={require('../../../static/image/ty.png')} alt="" /><span>{u.unixTime(item.addTime, true) || '2018-07-30 22:13'}</span></h3>

                                            <div className='outsiderightbotlistbot'>
                                                <div className='outsiderightbotlistbotleft'>
                                                    {/* <img src={require('../../../static/image/outsidepl.png')} alt="" /> */}
                                                    {
                                                        item.display_url ? (item.display_url.includes('http') ? <img src={require('../../../static/image/outsidepl.png')} alt="" /> : <img src={u.imgurl + item.display_url} alt="" style={{ width: '720px' }} />) : ''
                                                    }
                                                </div>
                                                <div className='outsiderightbotlistbotright'>
                                                    <div className='outsiderightbotlistbotrighttop'>
                                                        <div className='pltop'>
                                                            <p>{item.content || '美国科技企业越来越多地提出如下疑问? '}</p>
                                                            <p>{u.unixTime(item.addTime) || '2018-07-30 22:13'}</p>
                                                        </div>
                                                    </div>
                                                    <div className='outsiderightbotlistbotrightbot'>
                                                        <div className='plbot'>
                                                            <div className='plbotleft'>
                                                                <span><img src={require('../../../static/image/outside-icon1.png')} alt="" />{item.comment_number}</span>
                                                                <span><img src={require('../../../static/image/outside-icon2.png')} alt="" />{item.likes_number}</span>
                                                                <span><img src={require('../../../static/image/outside-icon3.png')} alt="" style={{ height: '20px' }} />{item.author || '宋中继'}</span>
                                                            </div>
                                                            <div className='plbotright' style={{ cursor: 'pointer' }} onClick={() => {
                                                                this.open(index)
                                                            }}>
                                                                <p style={{display:item.comments.length?'block':'none'}}>{item.flag ? '收起' : '打开'}剩余{item.comments.length}条评论<span className={item.flag ? '' : "spanactive"}>↑</span></p>
                                                            </div>
                                                        </div>
                                                        <div className='plbotlist'>
                                                            <ul className={item.flag ? "comment" : ""}>
                                                                {
                                                                    item.comments.length && item.comments.map((item, index) => {
                                                                        return (
                                                                            <li key={index}><span><img src={require('../../../static/image/pltx.png')} alt="" /></span><div className='nkdltt'><h3><span className='color' style={{ marginRight: '10px' }}>{item.username || '鲁达'}</span><span style={{ color: '#a1a5b5' }}>{u.unixTime(item.addTime) || '2018-07-30 22:13'}</span></h3><p><span className='color'>@kayleigh_eng</span><span>{item.comment_text || '问如果没有中国庞大市场的支撑随着美国政府贸易保护主义的不断加码?'}</span></p></div></li>
                                                                        )
                                                                    }) || ''
                                                                }
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>)
                                    }) || ''
                                } 
                                <div className='add' onClick={() => {
                                    this.add()
                                }}><span>查看更多>></span></div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        )
    }
}




export default Outside